<template>
  <div class="w-full h-full flex flex-col p-20 bg-[white]">
    <div
      class="w-full flex flex-col p-20"
      style="height: 400px;min-height: 400px;box-shadow: 0 0 6px rgba(125,125,125,.5);border-radius: 10px;"
    >
      <div class="w-full flex items-center p-10px">您好,</div>
      <div class="w-full flex-1 flex items-center">
        <div class="h-full flex-1">
          <LineChart />
        </div>
        <div class="h-full flex flex-col flex-1">
          <div class="w-full flex items-center justify-end mb-10">
            <el-date-picker
              v-model="timeRange"
              placeholder="请选择"
              type="daterange"
            />
            <div class="flex items-center ml-20">
              <span>总金额</span>
              <span class="text-18px text-#00ff00 mx-10">150</span>
              <span>万</span>
            </div>
          </div>
          <div class="w-full flex-1 overflow-hidden pb-20">
            <el-table
              :data="orderList"
              height="100%"
              style="width: 100%"
            >
              <el-table-column
                label="#"
                type="index"
              />
              <el-table-column
                label="订单名称"
                prop="prop"
                width="width"
              />
              <el-table-column
                label="姓名"
                prop="prop"
                width="width"
              />
              <el-table-column
                label="电话"
                prop="prop"
                width="width"
              />
              <el-table-column
                label="金额"
                prop="prop"
                width="width"
              />
              <el-table-column
                label="时间"
                prop="prop"
                width="width"
              />
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div
      class="w-full flex-1 flex flex-col mt-20 p-20"
      style="box-shadow: 0 0 6px rgba(125,125,125,.5);border-radius: 10px;"
    >
      <div
        class="w-full flex items-center p-10px"
        style="border-bottom: 1px solid rgba(125,125,125,.2);"
      >会员管理</div>
      <div
        class="w-full p-10 flex items-center"
        style="border-bottom: 1px solid rgba(125,125,125,.2); margin-bottom: 10px;"
      >
        <el-form
          ref="form"
          :model="query"
          inline
          label-width="80px"
        >
          <el-form-item label="锁客归属人">
            <el-select
              v-model="query"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in identityList"
                :key="index"
                :label="item.title"
                :value="item.itemNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="身份">
            <el-select
              v-model="query"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in identityList"
                :key="index"
                :label="item.title"
                :value="item.itemNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="query.mobile"
              clearable
              placeholder="请输入..."
              size="small"
            />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model="query.mobile"
              clearable
              placeholder="请输入..."
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex-1 w-full overflow-hidden">
        <el-table
          :data="memberList"
          height="100%"
          style="width: 100%"
        >
          <el-table-column
            label="#"
            prop="index"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="身份名称"
            prop="prop"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="微信昵称"
            prop="prop"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="姓名"
            prop="prop"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="电话"
            prop="prop"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="消费总金额"
            prop="prop"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="锁客链条"
            prop="prop"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="订单详情"
            prop="prop"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from './LineChart'
export default {
  components: { LineChart },
  data() {
    return {
      timeRange: [],
      orderList: [],
      memberList: [],
      identityList: [],
      query: {
        mobile: ''
      }
    }
  },
  created() {},
  mounted() {
    this.getIdentityList()
  },
  methods: {
    getIdentityList() {
      this.$http.get('/api/identityItem', { pageSize: 10000 }).then((_) => {
        const { content } = _
        this.identityList = content
      })
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
